import { ITodoData } from "../types/typings";
import TodoTemplate from "./TodoTemplate";
import { findParentNode } from './../utils/utils';

class TodoDom extends TodoTemplate {
    private todoWrapper: HTMLElement;
    constructor(todoWrapper: HTMLElement) {
        super();
        this.todoWrapper = todoWrapper;
    }
    protected initList(todoData: ITodoData[]): void {
        const oFrag: DocumentFragment = document.createDocumentFragment();
        if (todoData.length) {
            todoData.map((todo: ITodoData) => {
                const oItem: HTMLElement = document.createElement("div");
                oItem.className = "todo-item";
                oItem.innerHTML = this.todoView(todo);
                oFrag.appendChild(oItem);
            });
            this.todoWrapper.appendChild(oFrag);
        }
    }
    protected addItem(todo: ITodoData) {
        const oItem: HTMLElement = document.createElement("div");
        oItem.className = "todo-item";
        oItem.innerHTML = this.todoView(todo);
        this.todoWrapper.appendChild(oItem);
    }
    protected removeItem(target: HTMLElement) {
        const oParent: HTMLElement = findParentNode(target, 'todo-item');
        oParent.remove();
    }

    protected changeCompleted(target: HTMLElement, completed: boolean) {
        const oParent: HTMLElement = findParentNode(target, 'todo-item');
        const oContent = oParent.querySelector('span');
        oContent.style.textDecoration = completed ? 'line-through' : '';
    }
}
export default TodoDom;